<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ taglib prefix="catalog" tagdir="/WEB-INF/tags/catalog"%>
<%@ taglib prefix="product" tagdir="/WEB-INF/tags/product"%>
<%@ taglib prefix="customer" tagdir="/WEB-INF/tags/customer"%>
<%@ taglib prefix="attribute" tagdir="/WEB-INF/tags/attribute"%>
<head>
	<title><fmt:message key="productCompare.compare"/></title>
</head>
<c:set var="maxCount" value="5"/>
<c:set var="emptyCount" value="${maxCount - fn:length(compareProductList)}"/>
<form name="compareForm" id="compareForm" method="get"	action="${ctxPath}/prod/compare.html">
	<div class="product_compare">
		<div class="top"><span><fmt:message key="productCompare.compare"/></span></div>
		<div class="content">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_prod">
				<%-------------------------- start:商品名称----------------------------%>
				<tr>
					<th width="15%" class="title"><fmt:message key="product.productName"/></th>
					<c:forEach items="${compareProductList}" var="product">
						<th width="17%">${product.productName}</th>
					</c:forEach>
					<c:if test="${emptyCount != 0}">
						<c:forEach begin="1" end="${emptyCount}">
							<th width="17%"></th>
						</c:forEach>
					</c:if>
				</tr>
				<%-------------------------- end:  商品名称----------------------------%>
				
				<%-------------------------- start:商品图片----------------------------%>
				<tr class="productImage">
					<td class="title">
						<a class="btn_07" id="showDiff"><span><fmt:message key="productCompare.button.showDiff"/></span></a>
						<br/>
						<a class="btn_07" id="showAll"><span><fmt:message key="productCompare.button.showAll"/></span></a>
					</td>
					<c:forEach items="${compareProductList}" var="product">
						<td>
							<product:productImage product="${product}" sizeType="s1" target="_blank"/>
							<h4>
								<a href="<product:productUrl product="${product}"/>" target="_blank">${product.productName}</a>
							</h4>
							<div class="do">
								<a class="moveLeft forbidden" href="javascript:void(0)">←<fmt:message key="productCompare.button.moveLeft"/></a>&nbsp;
								<a class="removeProduct" href="javascript:void(0)" productId="${product.productId}"><fmt:message key="productCompare.button.remove"/></a>&nbsp;
								<a class="moveRight forbidden" href="javascript:void(0)"><fmt:message key="productCompare.button.moveRight"/>→</a>
								<br/>
								<c:set var="minOrderQuantity" value="1"/>
								<c:if test="${not empty product.minOrderQuantity}">
									<c:set var="minOrderQuantity" value="${product.minOrderQuantity}"/>
								</c:if>
								<a href="javascript:void(0)" onclick="addToCart('${product.defaultProductSku.productSkuCode}', null, ${minOrderQuantity});" class="add"><fmt:message key="productDetail.iWantToBuy"/></a>
							</div>
						</td>
					</c:forEach>
					<c:if test="${emptyCount != 0}">
						<c:forEach begin="1" end="${emptyCount}">
							<td>
								<img src="${noTxtImagePath}/pic_blank1.png"/>
								<br/><fmt:message key="productCompare.waitToAdd"/> 
							</td>
						</c:forEach>
					</c:if>	
				</tr>
				<%-------------------------- end:  商品图片----------------------------%>
				
				<%-------------------------- start:商品编号----------------------------%>
				<tr>
					<td class="title">
						<fmt:message key="product.productCode"/>
					</td>
					<c:forEach items="${compareProductList}" var="product">
						<td>${product.productCode}</td>
					</c:forEach>
					<c:if test="${emptyCount != 0}">
						<c:forEach begin="1" end="${emptyCount}">
							<td width="17%"></td>
						</c:forEach>
					</c:if>
				</tr>
				<%-------------------------- end:  商品编号----------------------------%>
				
				<%-------------------------- start:品牌----------------------------%>
				<tr>
					<td class="title">
						<fmt:message key="product.brand"/>
					</td>
					<c:forEach items="${compareProductList}" var="product">
						<td><a href="<product:brandUrl brandId="${product.brand.brandId}"/>" target="_blank">${product.brand.brandName}</a></td>
					</c:forEach>
					<c:if test="${emptyCount != 0}">
						<c:forEach begin="1" end="${emptyCount}">
							<td width="17%"></td>
						</c:forEach>
					</c:if>
				</tr>
				<%-------------------------- end:  品牌----------------------------%>
				
				<%-------------------------- start:价格----------------------------%>
				<tr>
					<td class="title">
						<fmt:message key="productCompare.price"/>
					</td>
					<c:forEach items="${compareProductList}" var="product">
						<td><product:productPrice productSku="${product.defaultProductSku}" multiple="true" hasPriceName="true"/></td>
					</c:forEach>
					<c:if test="${emptyCount != 0}">
						<c:forEach begin="1" end="${emptyCount}">
							<td width="17%"></td>
						</c:forEach>
					</c:if>
				</tr>
				<%-------------------------- end:  价格----------------------------%>
				
				<%-------------------------- start:顾客评分----------------------------%>
				<tr>
					<td class="title">
						<fmt:message key="productCompare.score"/>
					</td>
					<c:forEach items="${compareProductList}" var="product">
						<td>
							<fmt:formatNumber var="score" value="${product.productStat.reviewScore}" pattern="0.0"/>
							<em>${score}</em>
							<customer:scoreStar value="${score}"/>
							<br/>
							<fmt:message key="productCompare.onShowReviewCount">
								<fmt:param><b> ${product.productStat.onShowReviewCount} </b></fmt:param>
							</fmt:message>
						</td>
					</c:forEach>
					<c:if test="${emptyCount != 0}">
						<c:forEach begin="1" end="${emptyCount}">
							<td width="17%"></td>
						</c:forEach>
					</c:if>
				</tr>
				<%-------------------------- end:  顾客评分----------------------------%>
				
			</table>
			
			<%-------------------------- start:属性组与属性----------------------------%>
			<c:forEach items="${productAttGroups}" var="productAttGroup">
				<div class="parameter_wrap">
					<div class="top clearfix">
						<h3>${productAttGroup.productAttGroupName}</h3>
						<i class="close" style="cursor:pointer"><b><fmt:message key="productCompare.button.slideUp"/></b></i>
					</div>
					<div class="content">
						<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_para">
							<c:forEach items="${productAttGroup.activeProductAttGroupItems}" var="attItem">
								<tr>
									<td width="15%" class="title">
										<a href="javascript:void(0)" class="del" title="<fmt:message key="productCompare.button.remove"/>"></a>
										${attItem.attribute.attributeName}
									</td>
									<c:forEach items="${compareProductList}" var="product">
										<td width="17%" class="img">
											<attribute:getProductAttrValue attribute="${attItem.attribute}" entity="${product}"/>
											<attribute:display item="${attrValue}" />
										</td>
									</c:forEach>	
									<c:if test="${emptyCount != 0}">
										<c:forEach begin="1" end="${emptyCount}">
											<td width="17%"></td>
										</c:forEach>
									</c:if>
								</tr>
							</c:forEach>
						</table>
					</div>
				</div>
			</c:forEach>
			<%-------------------------- end:  属性组与属性----------------------------%>
			
			<div id="compareDiv" >
				<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_para">
					<tr>
						<th width="15%" class="title"><fmt:message key="product.productName"/></th>
						<c:forEach items="${compareProductList}" var="product">
							<th width="17%">${product.productName}</th>
						</c:forEach>
						<c:if test="${emptyCount != 0}">
							<c:forEach begin="1" end="${emptyCount}">
								<th width="17%"></th>
							</c:forEach>
						</c:if>
					</tr>
				</table>
				<div id="warpDiv"></div>
			</div>
		</div>
	</div>		
</form>

<c:set var="probizJs_shoppingcart" value="true" scope="request"/>
<c:set var="probizJs_compareCart" value="true" scope="request"/>
<script type="text/javascript">
var maxCount = ${maxCount};
var currCount = ${fn:length(compareProductList)};
$j(document).ready(function () {
	__FMTExtend = {
		 productCompare_waitToAdd:"<i18n:msg key="productCompare.waitToAdd"/>"  
	};
	$j.extend(__FMT, __FMTExtend); 
	autoScroll();
	updateMoveActionStyles();
	$j('#compareForm div.parameter_wrap i').bind('click',toggleParameterGroup);
	$j('#compareForm table.table_para a.del').bind('click',hideParameter);
	$j('#compareForm a.removeProduct').bind('click',removeCompareCartProductInCompare);
	$j('#compareForm a.moveLeft').bind('click',moveLeftProduct);
	$j('#compareForm a.moveRight').bind('click',moveRightProduct);
	$j('#showDiff').bind('click',showDiff);
	$j('#showAll').bind('click',showAll);
	
});

//只显示不相同的参数
function showDiff(){
	showAll();
	if(currCount == 0)return;
	$j('#compareForm table.table_para tr').each(function(){
		var jItems = $j(this).find('td').not(':first');
		if(jItems.length!=0){
			var html = $j(jItems[0]).html().trim();
			var isTheSame = true;
			jItems.each(function(){
				if($j(this).html().trim()!="" && $j(this).html().trim() != html){
					isTheSame = false;
				}
			});
			
			if(isTheSame)$j(this).hide();
		}	
	});

}

function showAll(){
	$j('#compareForm table.table_prod tr, #compareForm table.table_para tr').show();
}

//商品名称跟随滚动
function autoScroll(){
	var h = $j('#warpDiv').offset().top;
	$j(window).scroll(function(){
		var h2= $j(window).height();
		var h3= h-h2;
		if($j(window).scrollTop() < h3 ){
			$j('#compareDiv').addClass('para_hd');}
		else{
			$j('#compareDiv').removeClass('para_hd');}
	});
}

//显示隐藏参数组
function toggleParameterGroup(){
	var jContent = $j(this).parents('div.parameter_wrap').find('div.content')
	if(jContent.is(':hidden')){
		jContent.slideDown();
		$j(this).removeClass("open").addClass("close");
	}else{
		jContent.slideUp();
		$j(this).removeClass("close").addClass("open");
	}
}
//移除参数 (实际上是隐藏参数)
function hideParameter(){
	$j(this).parents('tr:first').hide();
}

//移除商品
function removeCompareCartProductInCompare(event){
	var productId = $j(this).attr("productId");
	$cc.removeProduct(productId);
	
	//start:移除html
	var jTd = $j(this).parents('td');
	var index = $j(this).parents('tr').find('td').index(jTd);
	$j('#compareForm table.table_prod tr, #compareForm table.table_para tr').each(function(){
		$j(this).find('th:eq('+index+'),td:eq('+index+')').html("");
	});
	//end  :移除html
	//start:图片部分
	var blankHtml = "";
	blankHtml += '<img src="'+__noTxtImagePath+'/pic_blank1.png"/><br/>';
	blankHtml += __FMT.productCompare_waitToAdd;
	$j('#compareForm table.table_prod tr.productImage td:eq('+index+')').html(blankHtml);
	//end:图片部分
	
	//start:将其移到最末
	$j('#compareForm table.table_prod tr, #compareForm table.table_para tr').each(function(){
		$j(this).append($j(this).find('th:eq('+index+'),td:eq('+index+')'));
	});
	//start:将其移到最末
	
	currCount--;
	updateMoveActionStyles();
}
//更新左移右移样式
function updateMoveActionStyles(){
	$j('#compareForm a.moveLeft').removeClass("forbidden");
	$j('#compareForm a.moveLeft:first').addClass("forbidden");
	$j('#compareForm a.moveRight').removeClass("forbidden");
	$j('#compareForm a.moveRight:last').addClass("forbidden");
}
//左移商品
function moveLeftProduct(){
	var jTd = $j(this).parents('td');
	var index = $j(this).parents('tr').find('td').index(jTd);
	if(index > 1){
		$j('#compareForm table.table_prod tr, #compareForm table.table_para tr').each(function(){
			var me = $j(this).find('th:eq('+index+'),td:eq('+index+')');
			var prev = me.prev();
			prev.before(me);
		});
	}
	
	updateMoveActionStyles();
}
//右移商品
function moveRightProduct(){
	var jTd = $j(this).parents('td');
	var index = $j(this).parents('tr').find('td').index(jTd);
	if(index < currCount){
		$j('#compareForm table.table_prod tr, #compareForm table.table_para tr').each(function(){
			var me = $j(this).find('th:eq('+index+'),td:eq('+index+')');
			var next = me.next();
			next.after(me);
		});
	}
	
	updateMoveActionStyles();
}

</script>